<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/12/30
  Time: 10:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--jquery核心包-->
    <script type="text/javascript" src="${ctx}/js/jquery.min.js" ></script>
    <!--easyui-->
    <script type="text/javascript" src="${ctx}/js/jquery.easyui.min.js" ></script>
    <script type="text/javascript" src="${ctx}/js/extJquery.js" ></script>
    <script type="text/javascript" src="${ctx}/js/extEasyUI.js" ></script>
    <script type="text/javascript" src="${ctx}/js/easyui-lang-zh_CN.js" ></script>

    <!--easyui样式引入-->
    <link rel="stylesheet" href="${ctx}/css/themes/default/easyui.css" />
    <link rel="stylesheet" href="${ctx}/css/themes/icon.css" />
    <link rel="stylesheet" href="${ctx}/css/style.css" />
</head>
<body>




<script>
    var tg;
    $(function(){
        var $edit = ${fn:contains(btnMap.uc, 'edit')};
        var $remove = ${fn:contains(btnMap.uc, 'remove')};
        tg = $('#userTable').datagrid({
            url:'${ctx}/uc/find',//获取数据的地址，返回值为list
            fit:true,
            pagination:true,
            rownumbers:true,
            columns:[[
                {field:'ck',checkbox:true},
                {field:'loginName',title:'登录名称',width:100,align:'center'},
                {field:'userName',title:'用户名称',width:100,align:'center'},
                {field:'roleName',title:'角色名称',width:100,align:'center'},
                {field:'sex',title:'性别',width:50,
                    formatter:function(v,r,i){
                        if(v==1){
                            v = "<font style='color:blue'>男</font>";
                        }else{
                            v = "<font style='color:red'>女</font>";
                        }
                        return v;
                    }
                },
                {field:'birthday',title:'出生日期',width:150},
                {field:'age',title:'年龄',width:80},
                {field:'createTime',title:'创建时间',width:200},
                {field:'active',title:'操作',width:200,align:'center',
                    formatter:function(v,r,i){
                        var str = '';
                        if($edit) {
                            str += '<a href="#" onclick="editData(' + r.id + ')">编辑</a>';
                            str += '&nbsp;|&nbsp;';
                        }
                        if($remove) {
                            str += '<a href="#" style="color:red" onclick="deleteData(' + r.id + ')">删除</a>';
                        }
                        return str;
                    }
                }
            ]],
            onLoadSuccess:function(data){
                tg.datagrid('loadData',pagerFilter(data));
            }
        });
    });
    function addData(){
        openDialog('新增数据','');
    }
    function editData(id){
        openDialog('编辑数据',id);
    }
    function deleteData(id){
        if(confirm("是否真的要删除该条记录?")){
            //数据提交
            $.ajax({
                type:'get',
                url:'${ctx}/uc/removeUser/'+id,
                dataType:'json',
                success:function(result){
                    alert(result.msg);
                    if(result.is){
                        tg.datagrid('reload');
                    }
                }
            });
        }
    }
    function openDialog(title,id){
        var url = "${ctx}/uc/addUser";
        if(id!=""){
            url = "${ctx}/uc/editUser";
        }
        $('#d1').dialog({
            title:title,
            width:500,
            height:450,
            modal:true,
            href:'${ctx}/uc/aoe?id='+id,
            buttons:[
                {
                    text:'保存',
                    iconCls:'icon-save',
                    handler:function(){
                        var f = $("#dataForm");
                        var data = f.serialize();
                        $.ajax({
                            type:"post",
                            url:url,
                            data:data,
                            dataType:'json',
                            success:function(result){
                                alert(result.msg);
                                if(result.is){
                                    $('#d1').dialog('close');
                                    tg.datagrid('reload');
                                }
                            },
                            error:function (result) {
                                if(result.responseText){
                                    alert(result.responseText);
                                }else{
                                    alert("保存失败");
                                }


                            }

                        });
                    }
                },{
                    text:'取消',
                    iconCls:'icon-cancel',
                    handler:function(){
                        $('#d1').dialog('close');//关闭对话框
                    }
                }
            ]
        });
    }
    function searchData() {
        var f = $("#searchForm");
        var data = f.serialize();
        $.ajax({
            type:'post',
            url:'${ctx}/uc/find',
            data:data,
            dataType:'json',
            success:function (result) {
                tg.datagrid('loadData',result);
            }
        })
    }
</script>
<style>
    #tb{
        margin: 10px 20px;
    }
    #tb td{
        line-height: 20px;
    }
</style>
<div id="cc_user" class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',title:'',split:false" style="height:50px;">
        <form id="searchForm">
            <table id="tb">
                <tr>
                    <td>用户名称:&nbsp;</td>
                    <td>
                        <input class="easyui-textbox" name="userName" />
                        &nbsp;
                    </td>
                    <td>出生日期:&nbsp;</td>
                    <td>
                        <input class="easyui-datebox" name="startTime" />
                        -
                        <input class="easyui-datebox" name="endTime" />
                        &nbsp;
                    </td>
                    <td>
                        <a class="easyui-linkbutton"
                           data-options="iconCls:'icon-search'" onclick="searchData()">查询</a>
                        <c:if test="${fn:contains(btnMap.uc, 'add')}">
                        <a class="easyui-linkbutton"
                           data-options="iconCls:'icon-eadd'" onclick="addData()">新增</a>
                        </c:if>

                    </td>
                </tr>
            </table>
        </form>
    </div>
    <div data-options="region:'center',title:'数据表格'"
         style="padding:0px;background:#eee;">
        <table id="userTable"></table>
    </div>
</div>
<div id="d1"></div>
</body>
</html>

